<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			textarea {
				border: 1px solid dodgerblue;
				padding: 5px;
				min-height: 20px;
				resize: none;
			}
		</style>
	</head>

	<body>
		<textarea id="textarea" style="height: 40px;"></textarea>
		<script type="text/javascript">
			var textarea = document.getElementById('textarea');

			function makeExpandingArea(el) {
				var setStyle = function(el) {
					el.style.height = 'auto';
					el.style.height = el.scrollHeight + 'px';
					// console.log(el.scrollHeight);
				}
				var delayedResize = function(el) {
					window.setTimeout(function() {
						setStyle(el)
					}, 17);
				}
				if(el.addEventListener) {
					el.addEventListener('input', function() {
						setStyle(el)
					}, false);
					setStyle(el)
				} else if(el.attachEvent) {
					el.attachEvent('onpropertychange', function() {
						setStyle(el)
					})
					setStyle(el)
				}
				if(window.VBArray && window.addEventListener) { //IE9
					el.attachEvent("onkeydown", function() {
						var key = window.event.keyCode;
						if(key == 8 || key == 46) delayedResize(el);

					});
					el.attachEvent("oncut", function() {
						delayedResize(el);
					}); //处理粘贴
				}
			}
			makeExpandingArea(textarea);
		</script>
	</body>

</html>